<script setup lang="ts">
  import IconMore from '/@/assets/home/more.svg';

  interface HomeCardProps {
    title?: string;
    more?: string;
  }
  const props = defineProps<HomeCardProps>();
</script>

<template>
  <div class="pt-14 flex flex-col">
    <div class="relative pt-[30px] w-full mx-auto">
      <div class="flex justify-between items-center mb-[32px] sm:mx-32">
        <span
          class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#4065ff] to-[#9747ff]"
          >{{ props.title }}</span
        >
        <a
          v-if="more"
          class="bg-[#D2D9FC] card-shadow rounded-[50px] w-[92px] h-[24px] flex items-center justify-center"
          :href="more"
          target="_blank"
        >
          <span class="bg-clip-text text-transparent bg-gradient-to-r from-[#5f70ff] to-[#A0B1F1]"
            >更多</span
          >
          <img class="w-[29px] ml-[6px]" :src="IconMore" />
        </a>
      </div>
      <div class="flex-grow">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .card-shadow {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
  }
</style>
